<template>
  <div class="timelineDemo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <ls-time-line ref="LsTimeLine" :scene="'product'" :data="list"
                      :timeLineInterval="timeLineInterval" :startDate="startTime" :endDate="endTime" :isTwoTick="false"
                      @date-change="timeChange" @timeline-tick-move="timeLineTickMove"
                      @AB-compare-event="judgeABWhatActive" @timeline-play="playAnimation"
                      @stop-play="stopAnimation"></ls-time-line>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in timelineProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in timelineMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "LsTimeLineDemo",
        data() {
            return {
                timeLineInterval: '',
                startTime: '2019-01-01',
                endTime: '2019-12-31',
                list:[
                    {timeRange:[{startTime:'2019-01-03',endTime:'2019-02-02'}],show:false},
                    {timeRange:[{startTime:'2019-01-02',endTime:'2019-01-17'},{startTime:'2019-01-20',endTime:'2019-01-31'}],show:false},
                    {timeRange:[{startTime:'2019-01-11',endTime:'2019-01-25'}],show:true},
                    {timeRange:[{startTime:'2019-01-08',endTime:'2019-01-30'}],show:true},
                ],
                //时间轴组件
                timelineProps: [
                    {name: 'scene', desc: '类型：String，默认值：""，什么场景下用到的时间轴插件,相当于id，唯一性'},
                    {name: 'data', desc: '类型：Array，默认值：[]，时间轴要播放内容的数据，用于显示内容的播放时长'},
                    {name: 'startDate', desc: '类型：String，默认值："2019-01-01"，时间轴上开始时间'},
                    {name: 'endDate', desc: '类型：String,默认值："2019-12-31"，时间轴上结束时间'},
                    {name: 'isTwoTick', desc: '类型：Boolean，默认值：false，是否显示两个指向时间的tick游标'},
                    {name: 'BStartDate', desc: '类型：String，默认值：""，当设置两个指向时间的tick游标时，第二个游标所指向的开始时间，当isTwoTick是true的时候，必须传进来'},
                    {name: 'BEndDate', desc: '类型：String，默认值：""，当设置两个指向时间的tick游标时，第二个游标所指向的开始时间，当isTwoTick是true的时候，必须传进来'},
                    {name: 'timeLineInterval', desc: '类型：String，默认值："Day"，可选值：Day(日)/Week(星期)/Month(月)/Season(季度)/Year(年)，时间轴的时间间隔'},
                    {name: 'playStartDate', desc: '类型：String，默认值："2019-01-01"，播放时间段开始的时间'},
                    {name: 'playEndDate', desc: '类型：String，默认值："2019-12-31"，播放时间段结束的时间'},
                    {name: 'playLoading', desc: '类型：Boolean，默认值：false，播放过程中加载loading'},
                ],
                timelineMethods: [
                    {
                        name: 'AB-compare-event',
                        desc: '参数："AIsActive"第一个游标激活，"BIsActive"第二个游标激活状态，说明：当属性isTwoTick是true的时候，时间轴上显示两个游标，分别点击游标时触发的事件'
                    },
                    {name: 'timeline-tick-move', desc: '参数：刻度游标指向的时间，字符串形式，例如：2019-01-01，说明：无论是时间轴上是一个游标还是两个游标，拖动任意刻度游标停止时触发事件，返回当前游标指向的事件'},
                    {name: 'date-change', desc: '参数：时间控件选择的时间，字符串形式，例如：2019-01-01，说明：时间轴上开始时间与结束时间选择时间时触发change事件，返回选择的时间'},
                    {name: 'stop-play', desc: '参数：无，说明：时间轴播放结束时触发'},
                    {name: 'timeline-play', desc: '参数：返回当前播放游标所指向的时间，说明：时间轴点击播放按钮时触发'}
                ],
            }
        },
        mounted() {
        },
        methods:{
            initTimeLine() {
                this.$refs.LsTimeLine.init();
            },
            //时间轴相关函数 ↓↓↓↓↓
            //时间轴时间改变获取选择的时间
            timeChange(e) {
                if (e.type == 'start') {
                    this.startTime = e.date;
                } else {
                    this.endTime = e.date;
                }
                //this.productLayerSearch();
            },
            //时间轴上刻度的移动
            timeLineTickMove(e) {

                this.startTime = e;
            },
            //播放按钮响应函数
            playAnimation(e) {

            },

            //停止播放动画,处理逻辑
            stopAnimation() {

                //this.isPlay = false;

            },

            //对比页中判断AB两个tab那个是点击状态
            judgeABWhatActive(e) {
                if (e == 'AIsActive') {

                } else {

                }
            },
            //时间轴相关函数 ↑↑↑↑↑
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" >

  .timelineDemo-wrapper {
    height: 100%;
    width: 100%;
  }

</style>
